<template>
  <div>
      <Header :cities="cities"></Header>
      <List :hotCities="hotCities" :cities="cities" :letter="letter"></List>
      <Alphabet :cities="cities" @change="handleLetterChange" ></Alphabet>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import List from './components/List.vue'
import Alphabet from './components/Alphabet.vue'
export default {
  name: 'City',
  data () {
    return {
      hotCities: {},
      cities: {},
      letter: String
    }
  },
  methods: {
    getCityListAll () {
      this.$ajax.get('http://localhost:8080/static/mock/city.json').then((result) => {
        if (result.status === 200) {
          this.cities = result.data.data.cities
          this.hotCities = result.data.data.hotCities
        }
      })
    },
    handleLetterChange (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getCityListAll()
  },
  components: {
    Header,
    List,
    Alphabet
  }
}
</script>

<style scoped>

</style>
